<template>
  <view>
	<view class="flex flex-col justifity-start items-center list">
			<view class="item flex flex-row justifity-start items-center" v-for="(item,index) in list" :key="index">
				<image :src="item.image" class="goods"></image>
					<view class="info flex flex-col justifity-between items-start" style="flex: 1;justify-content: space-between">
						<view class="name f_30 c_0">
							{{item.storeName}}
						</view>
						<view class="flex flex-row justifity-start items-center">
							<text class="red f_48">{{parseFloat(item.price) * 10 * 10}}积分</text>
							<text class="c_9 f_24">/{{item.unitName}}</text>
						</view>
						<view class="cart_btn" @tap="makeExchange(item)">
							<image src="@/static/cart.svg" mode=""></image>
						</view>
					</view>
			</view>
				
				
		</view>
	
    <view class="fixedbtn flex flex-row justify-between  u-fixed-bottom" v-if="userInfo && userInfo.nowMoney > 0" @tap="showDuihuan">
    	<view class="w100 flex flex-row justify-center items-center pt_20 bottom-btn">
			<image src="@/static/laba.svg" mode="" class="laba"></image>
			<text class="f_28 c_52">积分不够，试试<text class="red">余额兑换</text></text>
		</view>
    </view>
	<view v-if="isLogin" class="exchange" @tap="goExchange">我的兑换</view>
	
	<!-- 积分兑换 -->
	<uni-popup ref="buypopup">
		<view class="buylist">
			<view class="flex flex-row justify-between items-center ">
				<view class="mt_10 flex flex-row justify-between items-center w100" >
					<text class="f_32 c_9">余额</text>
					<text class="f_36 c_0">{{userInfo.nowMoney}}元</text>
				</view>
			</view>
			<view class="flex flex-row justify-between items-center ">
			
				<view class="mt_10 flex flex-row justify-between items-center w100" >
					<text class="f_32 c_9">可兑换</text>
					<text class="f_36 c_0">{{useful_point}}积分</text>
				</view>
			</view>
			<view class="flex flex-row justify-between items-center btnan mt_20">
				<view class="f_34 c_0 flex justify-center items-center" @tap="closeBuy">取消</view>
				<view class="f_34 red flex justify-center items-center" @tap="dhPointFn">
					兑换
				</view>
			</view>
		</view>
	</uni-popup>
  <uni-popup ref="goodpopup">
  	<view class="good">
      <view class="good-item">
        <view class="good-item-left">商品名称</view>
        <view class="good-item-right">{{editItem.storeName}}</view>
      </view>
      <view class="good-item">
        <view class="good-item-left">数量</view>
        <view class="good-item-right">
        <view class="good-item-right-1" @tap="num_de">-</view>
        <view class="good-item-right-2">{{dh_num}}
        </view>
          <view class="good-item-right-1" @tap="num_add">+</view>
        </view>
      </view>
      <view class="good-item">
        <view class="good-item-left">消耗积分</view>
        <view class="good-item-right">{{dh_point}}</view>
      </view>
      <view class="good-btn">
        <view class="good-btn-left" @tap="closeGood">取消</view>
        <view class="good-btn-right" @tap="dhGoodFn">确认</view>
      </view>
  	</view>
  </uni-popup>
	<listFooter :loadtitle="loadtitle"></listFooter>
  </view>
</template>

<script> 
  import {
    mapGetters
  } from "vuex";
import {getProduct} from '@/api/store.js'
import {orderExchange, integralExchange} from '@/api/api.js'
import { toLogin } from "../../libs/login";
  export default {
	computed: mapGetters([ "userInfo", "subAppId", "isLogin"]),
    data() {
      return {
		page: 1,
        limit: 20,
        loading: false,
        loadend: false,
        loadtitle: '暂无数据',
		list:[],
		dh_point: 0,
		useful_point: 0,
		editItem: {},
		dh_num:1,
      }
    },
	onReady() {
		// this.$refs.buypopup.open('center')
	},
	onShow() {
		this.getList()
		setTimeout(() => {
			this.useful_point = parseFloat(this.userInfo.nowMoney) * 10 * 10
		}, 200)
	},
    methods: {
      makeExchange(item) {
		if (!this.isLogin) {
			this.toLogin()
		} else {
			this.editItem = JSON.parse(JSON.stringify(item))
			 this.$refs.goodpopup.open()
			 this.dh_point = this.editItem.price * 10 * 10
		}
      },
	  toLogin() {
		toLogin()
	  },
      num_de() {
        if (this.dh_num > 1) {
          this.dh_num--
        }
        this.dh_point = this.dh_num * this.editItem.price * 10 * 10
      },
      num_add() {
        if (this.dh_num < this.editItem.stock) {
          this.dh_num++
        }
        this.dh_point = this.dh_num * this.editItem.price * 10 * 10
      },
      dhGoodFn() {
		orderExchange({
			productId: this.editItem.id,
			productNum: this.dh_num,
			subAppId: this.subAppId
		}).then(res => {
			console.log(res)
			if (res.data.orderNo) {
				uni.showToast({
					title: '兑换成功',
					icon: 'none'
				})
				this.$refs.goodpopup.close()
			}
		})
	  },
		dhPointFn() {
      integralExchange({
        integral: this.useful_point
      }).then(res=> {
        uni.showToast({
          title: '兑换成功',
          icon: 'none'
        })
        this.closeBuy()
        this.$store.dispatch("USERINFO");
      })
    },
    closeGood() {
      this.$refs.goodpopup.close()
    },
    closeBuy() {
      this.$refs.buypopup.close()
    },
		showDuihuan() {
			this.$refs.buypopup.open('center')
		},
		getList() {
			if (this.loading)
          return;
        if (this.loadend)
          return;
        this.loading = true;
        this.loadtitle = "";
        uni.showLoading({
          title: '加载中...'
        })
        getProduct({
          page: this.page,
          limit: this.limit,
		  consumeType: 2
        }).then((res) => {
          uni.hideLoading()
          let list = res.data.list
          let loadend = list.length < this.limit;
          this.list = this.list.concat(list)
          this.loadend = loadend;
          this.loading = false;
          this.loadtitle = loadend ? "到底啦，没有数据了~" : "加载更多"
        });
		},
      goExchange() {
        uni.navigateTo({
          url: '/subpageB/point_exchange/point_exchange'
        })
	  }
    }
  }
</script>

<style lang="scss">
  .good {
    width: 650rpx;
    padding: 20rpx;
    border-radius: 20rpx;
    background-color: #fff;
    &-btn {
      display: flex;
      align-items: cneter;
      justify-content: center;
      line-height: 60rpx;
      margin-top: 40rpx;
      &-left {
        flex:1;
        text-align: center;
        font-size: 26rpx;
        color: #333;
      }
      &-right {
        flex: 1;
        color: #DF4B43;
        font-size: 26rpx;
        text-align: center;
      }
    }
    &-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 40rpx;
      &-left {
        color: #666;
        font-size: 24rpx;
      }
      &-right {
        color: #333;
        font-size: 28rpx;
        display: flex;
        flex:1;
        justify-content: flex-end;
        align-items: cneter;
        &-1 {
          background: #DF4B43;
          border-radius: 10rpx;
          color: #fff;
          text-align: center;
          padding: 4rpx;
          width: 50rpx;
          font-size: 28rpx;
          line-height: 50rpx;
        }
        &-2 {
          margin: 0 20rpx;
          font-size: 24rpx;
          font-size: 30rpx;
              line-height: 60rpx;
			  width: 30rpx;
        }
      }
    }
  }
 .exchange {
    position: fixed;
    right: 0;
    bottom: 170rpx;
    width: 140rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-top-left-radius: 40rpx;
    border-bottom-left-radius: 40rpx;
    background: #FF774D;
    color:#fff;
    font-size: 24rpx;
  }
	.close_icon {
		width: 34rpx;
	}
	.buylist{
		background: #fff;
		padding: 30rpx ;
		width: 650rpx;
		border-radius: 20rpx;
		input{
			text-align: right;
		}
		.buy-title{
			padding: 20rpx 0;
		}
		.buyactive {
			border-color: #DF4B43!important;
		}
		.buyitem{
			width: 214rpx;
			margin: 20rpx 0;
			padding-top: 40rpx;
			height: 280rpx;
			border:2rpx solid #e8e8e8;
			border-radius:24rpx;
			position: relative;
			.tag{
				margin-top:10rpx;
				background-color: #FFEDC2;
				width: 85%;
				height: 50rpx;
				border-radius: 100rpx;
				font-size: 18rpx;
			}
			.abtag{
				position: absolute;
				width: 134rpx;
				height: 46rpx;
				padding: 8rpx 18rpx;
				border-radius: 0px 10px;
				background: #ED2B00;
				color: #fff;
				font-size: 22rpx;
				right: 0;
				top: 0;
			}
		}
	}
	.btnan{
		width: 100%;
		height: 100rpx;
		
		view{
			width: 50%;
		}
	}
	.fixedbtn {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1rpx solid #D9D9D9;
		background-color: #fff;
		z-index: 999;
		// padding-bottom: constant(safe-area-inset-bottom);
		// 	padding-bottom: env(safe-area-inset-bottom);
		
			  padding-bottom: var(--safe-area-inset-bottom);
		.btn {
			margin-top: 20rpx;
			width: 90%;
			margin-left: 5%;
			height: 90rpx;
				border-radius: 200px;
	
			text-align: center;
			display: flex;
	
			justify-content: center;
			align-items: center;
	
		}
		
	}
	
	.laba{
		width: 34rpx;
		height: 34rpx;
		margin-right: 10rpx;
	}
	.toptitle{
		width: 100%;
		background-color: #fff;
		line-height: 82rpx;
		position: fixed;
		top:0;
		left: 0;
	}
	.tab{
		width: 50%;
		
		
	}
	.listnew{
		margin-top: 100rpx;
		
	}
	.mb_100{
		margin-bottom: 100rpx;
	}
	.mb_40{
		margin-bottom: 40rpx;
	}
	.list{
		
		.item{
			position: relative;
			width: 90%;
			margin: 20rpx 0;
			background: #fff;
			border-radius: 16rpx;
			
			.goods{
				width: 228rpx;
				height: 228rpx;
				border-radius: 20rpx;
				margin-right: 12rpx;
			}
			.sheng{
				border: 1rpx solid #DF4B43;
				border-radius: 6rpx;
				padding-right: 10rpx;
				font-size: 22rpx;
				margin-top: 10rpx;
				.tagbg{
					background-color: #DF4B43;
					color: #fff;
					margin-right: 10rpx;
				}
			}
			
		}
	}
	.cart_btn{
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 24rpx;
		background:linear-gradient(90deg, #FF783E 1.9%, #ED2B00 98.1%);
		image{
			width: 34rpx;
			height: 34rpx;
		}
	}
	.bottom-btn {
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

	}
</style>
